import express from 'express';
import { renderToString } from 'vue/server-renderer';
import { createApp } from './app.js';
import fs from 'fs'
const server = express();
server.get('/', (req, res) => {
  const app = createApp();
  renderToString(app).then((html) => {
    const content = `
    <!DOCTYPE html>
    <html>
      <head>
        <title>Vue SSR Example</title>
        <script type="importmap">
          {
            "imports": {
              "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
            }
          }
        </script> 
        <script type="module" src="/client.js">
        </script>
        <link type="text/css" href="/style.css" rel="stylesheet">
      </head>
      <body>
        <div id="app" style="overflow-y: scroll;width:360px;height:720px;position:relative;margin:0 auto">${html}</div>
      </body>
    </html>
    `
    fs.writeFileSync('server/index.html', content)
    res.send('success');
  });
});

server.use(express.static('.'));

server.listen(3333, () => {
  console.log('ready');
});
